<template>
	<view class="container">
		<!-- 顶部渐变背景区域 -->
		<view class="top-gradient-section">
			<!-- 自定义导航栏 -->
			<view class="custom-navbar">
				<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
				<view class="navbar-content">
					<view class="navbar-title">绿茵裁判通</view>
				</view>
			</view>
			
			<!-- 轮播图 -->
			<view class="banner-container">
				<swiper class="banner" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item, index) in banners" :key="index">
						<view class="banner-item" @click="navigateToBanner(item)">
							<image :src="item.image" mode="aspectFill" class="banner-image"></image>
							<view class="banner-title" v-if="item.title">{{item.title}}</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		<!-- 功能导航 -->
		<view class="nav-grid-container">
			<view class="nav-grid">
				<view class="nav-glass-card" v-for="(item, index) in navItems" :key="index" @click="navigateTo(item.url)">
					<view class="glass-card-content">
						<!-- 简化为只保留最内层图标 -->
						<view class="icon-area">
							<!-- 规则学习图标 -->
							<view v-if="index === 0" class="rule-glass-icon">
								<view class="book-icon"></view>
								<view class="whistle-icon"></view>
							</view>
							
							<!-- 在线考试图标 -->
							<view v-else-if="index === 1" class="exam-glass-icon">
								<view class="paper-icon"></view>
								<view class="check-icon"></view>
							</view>
							
							<!-- 学习计划图标 -->
							<view v-else-if="index === 2" class="plan-glass-icon">
								<view class="calendar-icon"></view>
								<view class="progress-icon"></view>
							</view>
							
							<!-- 比赛报名图标 -->
							<view v-else class="match-glass-icon">
								<view class="trophy-icon"></view>
								<view class="star-icon"></view>
							</view>
						</view>
						
						<view class="glass-card-text">
							<text class="glass-card-title">{{item.name}}</text>
							<text class="glass-card-subtitle">{{item.subtitle}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 通知公告 -->
		<view class="notice-section">
			<view class="section-header">
				<text class="section-title">通知公告</text>
				<text class="section-more" @click="navigateTo('/packageNotice/Notice/notice-list')">更多 ></text>
			</view>
			<view class="notice-list">
				<view v-if="notices && notices.length > 0" class="notice-item" v-for="(item, index) in notices" :key="index" @click="navigateTo(item.url)">
					<text class="notice-title">{{item.title}}</text>
					<text class="notice-date">{{item.date}}</text>
				</view>
				<view v-else class="notice-empty">
					<text>暂无公告信息</text>
				</view>
			</view>
		</view>
		
		<!-- 最新资源 -->
		<view class="resource-section">
			<view class="section-header">
				<text class="section-title">最新资源</text>
				<text class="section-more" @click="navigateToStudy()">更多 ></text>
			</view>
			<view class="resource-list-text">
				<view class="resource-item-text" v-for="(item, index) in resources" :key="index" @click="navigateTo(item.url)">
					<view class="resource-type-tag rule-tag">
						规则
					</view>
					<text class="resource-title-text">{{item.title}}</text>
					<text class="resource-date">{{formatDate(item.create_date)}}</text>
				</view>
				<view v-if="resources.length === 0" class="resource-empty">
					<text>暂无最新资源</text>
				</view>
			</view>
		</view>
		
		<!-- AI助手组件 -->
		<ai-float-button />
	</view>
</template>

<script>
	import AiFloatButton from '@/uni_modules/ai-assistant/components/ai-float-button/ai-float-button.vue';
	
	export default {
		components: {
			AiFloatButton
		},
		data() {
			return {
				userInfo: null,
				banners: [],
				notices: [],
				resources: [],
				statusBarHeight: 0,
				navItems: [
					{
						name: '规则学习',
						subtitle: '掌握规则',
						url: '/pages/study/study'
					},
					{
						name: '在线考试',
						subtitle: '测试能力',
						url: '/pages/exam/exam'
					},
					{
						name: '学习计划',
						subtitle: '制定目标',
						url: '/packageMy/my/learning-plan'
					},
					{
						name: '比赛报名',
						subtitle: '执裁机会',
						url: '/pages/competition/competition'
					}
				],
				// 保存用户想要跳转的tab
				selectedTab: null
			}
		},
		onLoad() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			
			// 获取用户信息
			this.getUserInfo();
			
			// 获取轮播图数据
			this.getBanners();
			
			// 获取通知公告
			this.getNotices();
			
			// 获取最新资源
			this.getResources();
			
			// 监听资源更新事件
			uni.$on('resourceUpdated', this.handleResourceUpdated);
		},
		onShow() {
			// 页面每次显示时重新获取最新资源
			this.getResources();
		},
		onUnload() {
			// 移除事件监听器
			uni.$off('resourceUpdated', this.handleResourceUpdated);
		},
		onPullDownRefresh() {
			// 下拉刷新
			this.refreshData();
		},
		// 分享到聊天
		onShareAppMessage() {
			return {
				title: '绿茵裁判通 - 足球裁判规则学习平台',
				path: '/pages/index/index',
				imageUrl: this.banners && this.banners.length > 0 ? this.banners[0].image : '/static/logo.png',
				success: () => {
					uni.showToast({
						title: '分享成功',
						icon: 'success'
					});
				}
			};
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: '绿茵裁判通 - 足球裁判规则学习平台',
				query: '',
				imageUrl: this.banners && this.banners.length > 0 ? this.banners[0].image : '/static/logo.png'
			};
		},
		methods: {
			// 下拉刷新数据
			refreshData() {
				console.log('开始下拉刷新');
				
				// 重新获取所有数据
				Promise.all([
					this.getBannersPromise(),
					this.getNoticesPromise(), 
					this.getResourcesPromise()
				]).then(() => {
					uni.showToast({
						title: '刷新成功',
						icon: 'success',
						duration: 1500
					});
				}).catch((error) => {
					console.error('刷新失败:', error);
					uni.showToast({
						title: '刷新失败',
						icon: 'none',
						duration: 1500
					});
				}).finally(() => {
					// 停止下拉刷新动画
					uni.stopPullDownRefresh();
				});
			},
			
			// 处理资源更新事件
			handleResourceUpdated() {
				console.log('检测到资源更新事件，刷新最新资源列表');
				this.getResources();
			},
			
			// 获取用户信息
			getUserInfo() {
				try {
					const userInfoStr = uni.getStorageSync('userInfo');
					if (userInfoStr) {
						this.userInfo = JSON.parse(userInfoStr);
					} 
				} catch (e) {
					console.error('获取用户信息失败', e);
				}
			},
			
			// 获取通知公告
			async getNotices() {
				try {
					const noticeService = uniCloud.importObject('notice-service');
					const res = await noticeService.getNotices({
						limit: 3, // 只获取最新的3条公告
						showInHome: true, // 修改为 true，获取不在轮播显示的公告
						creatorId: this.userInfo ? this.userInfo._id : null
					});
					
					console.log('后端返回数据:', res); // 添加调试日志
					if (res.code === 0 && Array.isArray(res.data)) {
						const notices = res.data.map(item => {
							return {
								id: item._id,
								title: item.title,
								date: this.formatDate(item.publishDate),
								url: `/packageNotice/Notice/notice-detail?id=${item._id}`
							};
						});
						
						if (notices.length > 0) {
							this.notices = notices;
						} else {
							this.notices = []; // 清空公告列表
							console.log('暂无公告信息');
						}
					} else {
						console.error('获取通知公告数据格式不正确:', res);
					}
				} catch (err) {
					console.error('获取通知公告失败', err);
				}
			},
			
			// 获取首页轮播图
			async getBanners() {
				// 从云端获取设置为在轮播显示的公告
				uni.showLoading({
					title: '加载中...'
				});
				
				try {
					const myService = uniCloud.importObject('my-service');
					const res = await myService.getBanners();
					
					if (res.code === 0 && Array.isArray(res.data)) {
						// 检查是否有返回数据
						if (res.data.length > 0) {
							this.banners = res.data;
							console.log('成功加载轮播图数据:', this.banners);
						} else {
							console.log('轮播图数据为空，使用默认数据');
						}
					} else {
						console.error('轮播图数据格式不正确:', res);
					}
				} catch (err) {
					console.error('获取轮播图失败', err);
				} finally {
					uni.hideLoading();
				}
			},
			
			// 日期格式化
			formatDate(dateStr) {
				if (!dateStr) return '';
				
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				
				return `${year}-${month}-${day}`;
			},
			
			// 获取最新资源
			async getResources() {
				uni.showLoading({
					title: '加载中...'
				});
				
				try {
					const learningService = uniCloud.importObject('learning-service');
					const res = await learningService.getLatestResources({
						limit: 6 // 获取6条最新资源
					});
					
					if (res.code === 0 && Array.isArray(res.data)) {
						// 检查是否有返回数据
						if (res.data.length > 0) {
							this.resources = res.data;
							console.log('成功加载最新资源数据:', this.resources);
						} else {
							console.log('最新资源数据为空');
							this.resources = [];
						}
					} else {
						console.error('获取最新资源数据格式不正确:', res);
					}
				} catch (err) {
					console.error('获取最新资源失败', err);
				} finally {
					uni.hideLoading();
				}
			},
			
			// 获取轮播图数据（Promise版本）
			async getBannersPromise() {
				try {
					const myService = uniCloud.importObject('my-service');
					const res = await myService.getBanners();
					
					if (res.code === 0 && Array.isArray(res.data)) {
						if (res.data.length > 0) {
							this.banners = res.data;
							console.log('成功加载轮播图数据:', this.banners);
						} else {
							console.log('轮播图数据为空，使用默认数据');
						}
						return res.data;
					} else {
						console.error('轮播图数据格式不正确:', res);
						throw new Error('轮播图数据格式不正确');
					}
				} catch (err) {
					console.error('获取轮播图失败', err);
					throw err;
				}
			},
			
			// 获取通知公告（Promise版本）
			async getNoticesPromise() {
				try {
					const noticeService = uniCloud.importObject('notice-service');
					const res = await noticeService.getNotices(1, 3, null, true, null, null, this.userInfo ? this.userInfo._id : null);
					
					if (res.code === 0 && Array.isArray(res.data)) {
						const notices = res.data.map(item => {
							return {
								id: item._id,
								title: item.title,
								date: this.formatDate(item.publishDate),
								url: `/packageNotice/Notice/notice-detail?id=${item._id}`
							};
						});
						
						if (notices.length > 0) {
							this.notices = notices;
						} else {
							this.notices = [];
							console.log('暂无公告信息');
						}
						return notices;
					} else {
						console.error('获取通知公告数据格式不正确:', res);
						throw new Error('通知公告数据格式不正确');
					}
				} catch (err) {
					console.error('获取通知公告失败', err);
					throw err;
				}
			},
			
			// 获取最新资源（Promise版本）
			async getResourcesPromise() {
				try {
					const learningService = uniCloud.importObject('learning-service');
					const res = await learningService.getLatestResources({
						limit: 6
					});
					
					if (res.code === 0 && Array.isArray(res.data)) {
						if (res.data.length > 0) {
							this.resources = res.data;
							console.log('成功加载最新资源数据:', this.resources);
						} else {
							console.log('最新资源数据为空');
							this.resources = [];
						}
						return res.data;
					} else {
						console.error('获取最新资源数据格式不正确:', res);
						throw new Error('最新资源数据格式不正确');
					}
				} catch (err) {
					console.error('获取最新资源失败', err);
					throw err;
				}
			},
			
			// 页面跳转方法
			navigateTo(url) {
				// 检查URL是否有效
				if (!url) {
					uni.showToast({
						title: '页面路径无效',
						icon: 'none'
					});
					return;
				}
				
				console.log('尝试跳转到:', url);
				
				// 特殊处理规则学习的跳转
				if (url === '/pages/study/study') {
					// 保存要显示的tab索引到本地存储（规则学习固定为0）
					uni.setStorageSync('studyTabIndex', 0);
					console.log('保存tab索引: 0');
				}
				
							// 检查是否为 Tabbar 页面
			const tabbarPages = ['/pages/index/index', '/pages/exam/exam', '/pages/study/study', '/pages/competition/competition'];
				
				// 移除参数，只保留路径部分进行比较
				const urlPath = url.split('?')[0];
				
				if (tabbarPages.includes(urlPath)) {
					console.log('检测到 Tabbar 页面，使用 switchTab');
					// 使用 switchTab 跳转到 tabbar 页面
					uni.switchTab({
						url: urlPath,
						success: (res) => {
							console.log('switchTab 跳转成功', res);
						},
						fail: (err) => {
							console.error('switchTab 跳转失败', err);
							uni.showToast({
								title: '页面跳转失败',
								icon: 'none'
							});
						}
					});
				} else {
					// 检查是否为packageStudy分包中的页面
					if (url.startsWith('/packageStudy/')) {
						console.log('检测到 packageStudy 分包页面');
						try {
							// 使用 navigateTo 跳转到分包页面
							uni.navigateTo({
								url: url,
								success: (res) => {
									console.log('navigateTo 分包页面跳转成功', res);
								},
								fail: (err) => {
									console.error('navigateTo 分包页面跳转失败', err);
									uni.showToast({
										title: '分包页面跳转失败: ' + (err.errMsg || '未知错误'),
										icon: 'none',
										duration: 3000
									});
								}
							});
						} catch (error) {
							console.error('分包页面跳转发生异常:', error);
							uni.showToast({
								title: '分包页面跳转异常',
								icon: 'none'
							});
						}
					} else {
						// 使用 navigateTo 跳转到普通非 tabbar 页面
						uni.navigateTo({
							url: url,
							success: (res) => {
								console.log('navigateTo 跳转成功', res);
							},
							fail: (err) => {
								console.error('navigateTo 跳转失败', err);
								// 跳转失败时显示具体错误信息
								uni.showToast({
									title: '页面跳转失败: ' + (err.errMsg || '未知错误'),
									icon: 'none',
									duration: 3000
								});
							}
						});
					}
				}
			},
			
			// 轮播图导航处理
			navigateToBanner(item) {
				if (!item) return;
				
				console.log('点击轮播图项目:', item);
				
				try {
					// 根据类型跳转到相应页面
					if (item.type === 'activity') {
						uni.navigateTo({
							url: `/packageNotice/Notice/notice-detail?id=${item.id}&type=activity`
						});
					} else {
						uni.navigateTo({
							url: `/packageNotice/Notice/notice-detail?id=${item.id}`
						});
					}
				} catch (error) {
					console.error('轮播图跳转错误:', error);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			},
			
			// 更新最新资源更多跳转链接
			navigateToStudy() {
				// 使用tabbar页面跳转方式
				uni.switchTab({
					url: '/pages/study/study',
					success: () => {
						// 设置默认要显示的学习中心的tab索引为0(规则学习)
						uni.setStorageSync('studyTabIndex', 0);
					},
					fail: (err) => {
						console.error('学习中心跳转失败', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		width: 100%;
		box-sizing: border-box;
	}
	
	/* 顶部渐变背景区域 */
	.top-gradient-section {
		width: 100%;
		/* 淡绿色到灰色渐变背景，与页面背景色相融 */
		background: linear-gradient(135deg, #8dd3c7 0%, #b8e6b8 30%, #d0d0d0 70%, #f5f5f5 100%);
		overflow: hidden;
		position: relative;
	}
	
	/* 移除底部装饰，实现无边框效果 */
	
	/* 自定义导航栏样式 */
	.custom-navbar {
		width: 100%;
		/* 移除固定定位，让它成为渐变区域的一部分 */
		position: relative;
		z-index: 999;
	}
	
	.status-bar {
		width: 100%;
	}
	
	.navbar-content {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	
	.navbar-title {
		font-size: 36rpx;
		font-weight: bold;
		color: white;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}
	
	/* 轮播图容器样式 */
	.banner-container {
		width: 100%;
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;
	}
	
	/* 轮播图样式 */
	.banner {
		width: 100%;
		height: calc(100vw * 9 / 16);
		position: relative;
		box-sizing: border-box;
		/* 移除之前的margin-top，因为现在在渐变区域内 */
		margin: 20rpx 0 0 0;
	}
	
	/* 轮播图指示器样式优化 */
	.banner /deep/ .uni-swiper-dots {
		bottom: 30rpx;
	}
	
	.banner /deep/ .uni-swiper-dot {
		width: 16rpx;
		height: 16rpx;
		background-color: rgba(255, 255, 255, 0.4);
		border-radius: 50%;
		margin: 0 8rpx;
		transition: all 0.3s ease;
	}
	
	.banner /deep/ .uni-swiper-dot-active {
		background-color: rgba(255, 255, 255, 0.9);
		transform: scale(1.2);
	}
	
	/* 菜单模块 */
	.menu-section {
		width: 100%;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		display: none; /* 隐藏不使用的菜单模块 */
	}
	
	.menu-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}
	
	.menu-item {
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		padding: 20rpx 0;
		margin-bottom: 10rpx;
	}
	
	/* 规则学习模块 */
	.module-section {
		margin-top: 20rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
		width: 100%;
		box-sizing: border-box;
		display: none; /* 隐藏不使用的模块 */
	}
	
	.module-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		width: 100%;
		box-sizing: border-box;
	}
	
	.module-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: flex;
		align-items: center;
		word-wrap: break-word;
		word-break: break-all;
	}
	
	.rule-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}
	
	.rule-item {
		width: 48%;
		background-color: #f9f9f9;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.rule-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		word-wrap: break-word;
		word-break: break-all;
		line-height: 1.4;
	}
	
	/* 轮播图样式 */
	.banner-item {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		border-radius: 20rpx;
		/* 添加轻微的阴影，让轮播图在渐变背景上更突出 */
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
	}
	
	.banner-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 20rpx;
	}
	
	.banner-title {
		position: absolute;
		bottom: 15rpx;
		left: 0;
		right: 0;
		padding: 12rpx 20rpx;
		background-color: rgba(0, 0, 0, 0.6);
		color: #FFFFFF;
		font-size: 28rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
		border-radius: 0 0 20rpx 20rpx;
	}
	
	/* 导航部分样式 - 毛玻璃风格 */
	.nav-grid-container {
		padding: 20rpx 0; /* 移除左右padding，让页边距与通知公告一致 */
		margin: 30rpx 20rpx 20rpx;
	}
	
	.nav-grid {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		/* 移除gap属性，改用margin来控制间距 */
	}
	
	.nav-glass-card {
		width: calc(50% - 12rpx); /* 调整宽度确保2x2布局并保持边距对称 */
		height: 120rpx; /* 进一步缩小高度 */
		border-radius: 20rpx; /* 相应调整圆角 */
		overflow: hidden;
		position: relative;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		/* 毛玻璃效果 */
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx); /* Safari 兼容 */
		background: rgba(255, 255, 255, 0.85);
		/* 备用方案：如果不支持backdrop-filter，使用半透明背景 */
		background: linear-gradient(135deg, 
			rgba(255, 255, 255, 0.9) 0%, 
			rgba(255, 255, 255, 0.8) 100%);
		border: 1px solid rgba(255, 255, 255, 0.3);
		box-shadow: 
			0 8rpx 32rpx rgba(0, 0, 0, 0.08),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.5);
		/* 使用margin来控制间距，确保左右对称 */
		margin-right: 8rpx;
		margin-bottom: 16rpx;
		/* 明确的flex基础设置 */
		flex: 0 0 calc(50% - 12rpx);
	}
	
	/* 调整每行最后一个元素的边距，确保对称 */
	.nav-glass-card:nth-child(2n) {
		margin-right: 0;
		margin-left: 8rpx;
	}
	
	.nav-glass-card:active {
		transform: translateY(2rpx) scale(0.98); /* 减小按压位移以适应长方形 */
		box-shadow: 
			0 4rpx 16rpx rgba(0, 0, 0, 0.12),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.5);
	}
	
	/* 悬停效果增强 */
	.nav-glass-card:hover {
		transform: translateY(-1rpx); /* 减小悬停位移 */
		box-shadow: 
			0 10rpx 32rpx rgba(0, 0, 0, 0.12),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.6);
	}
	
	/* 兼容性支持检测 */
	@supports (backdrop-filter: blur(20rpx)) or (-webkit-backdrop-filter: blur(20rpx)) {
		.nav-glass-card {
			background: rgba(255, 255, 255, 0.85);
		}
	}
	
	.glass-card-content {
		height: 100%;
		display: flex;
		flex-direction: row; /* 改为水平排列 */
		align-items: center; /* 垂直居中对齐 */
		padding: 16rpx 16rpx 16rpx 24rpx; /* 增加左padding，让内容整体右移 */
		position: relative;
		gap: 16rpx; /* 图标和文字之间的间距 */
	}
	
	.icon-area {
		width: 72rpx; /* 调整图标区域大小适应新高度 */
		height: 72rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		flex-shrink: 0; /* 防止图标容器被压缩 */
	}
	
	.glass-card-text {
		flex: 1; /* 占据剩余空间 */
		text-align: left;
		margin-top: 0; /* 移除顶部边距 */
	}
	
	.glass-card-title {
		font-size: 28rpx; /* 稍微减小字体 */
		font-weight: 600;
		color: #333333;
		display: block;
		margin-bottom: 6rpx; /* 减小间距 */
		line-height: 1.2;
	}
	
	.glass-card-subtitle {
		font-size: 22rpx; /* 稍微减小字体 */
		color: #999999;
		font-weight: 400;
		opacity: 0.8;
		line-height: 1.2;
	}
	
	/* 背景颜色 */
	.glass-bg-0 {
		/* 移除旧的背景色配置，使用新的图标容器背景色 */
	}
	
	.glass-bg-1 {
		/* 移除旧的背景色配置，使用新的图标容器背景色 */
	}
	
	.glass-bg-2 {
		/* 移除旧的背景色配置，使用新的图标容器背景色 */
	}
	
	.glass-bg-3 {
		/* 移除旧的背景色配置，使用新的图标容器背景色 */
	}
	
	/* 通用section样式 */
	.notice-section, .resource-section {
		margin: 0 20rpx 20rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	}
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.section-more {
		font-size: 28rpx;
		color: #1eca7d;
		font-weight: 500;
	}
	
	/* 通知公告样式 */
	.notice-list {
		padding: 20rpx 0;
	}
	
	.notice-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #f5f5f5;
		transition: background-color 0.3s ease;
	}
	
	.notice-item:last-child {
		border-bottom: none;
	}
	
	.notice-item:active {
		background-color: #f9f9f9;
	}
	
	.notice-title {
		font-size: 30rpx;
		color: #333333;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
	}
	
	.notice-date {
		font-size: 26rpx;
		color: #999999;
		margin-left: 20rpx;
		flex-shrink: 0;
	}
	
	.notice-empty {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 50rpx 0;
		color: #CCCCCC;
		font-size: 30rpx;
		font-weight: 500;
	}
	
	/* 新的纯文本形式最新资源样式 */
	.resource-list-text {
		width: 100%;
		padding: 10rpx 0;
	}
	
	.resource-item-text {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #f5f5f5;
		transition: background-color 0.3s ease;
	}
	
	.resource-item-text:last-child {
		border-bottom: none;
	}
	
	.resource-item-text:active {
		background-color: #f9f9f9;
	}
	
	.resource-type-tag {
		padding: 6rpx 16rpx;
		font-size: 24rpx;
		color: #ffffff;
		border-radius: 12rpx;
		margin-right: 15rpx;
		flex-shrink: 0;
		font-weight: 500;
	}
	
	.rule-tag {
		background-color: #1eca7d;
	}
	
	.resource-title-text {
		flex: 1;
		font-size: 30rpx;
		color: #333333;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.resource-date {
		font-size: 26rpx;
		color: #999999;
		margin-left: 15rpx;
		flex-shrink: 0;
	}
	
	.resource-empty {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 50rpx 0;
		color: #CCCCCC;
		font-size: 30rpx;
		font-weight: 500;
	}
	
	/* 图标样式 */
	.icon-content {
		display: none; /* 隐藏不再使用的图标容器 */
	}
	
	.custom-icon {
		display: none; /* 隐藏不再使用的自定义图标 */
	}
	
	/* 规则学习图标样式 */
	.rule-glass-icon {
		position: relative;
	}
	
	.book-icon {
		width: 54rpx; /* 适当调整书本图标大小 */
		height: 46rpx;
		background: linear-gradient(135deg, #1eca7d, #43CF7C);
		border-radius: 8rpx;
		position: relative;
		box-shadow: 0 4rpx 16rpx rgba(30, 202, 125, 0.3);
	}
	
	.book-icon::before {
		content: '';
		position: absolute;
		top: 8rpx;
		left: 8rpx;
		right: 8rpx;
		height: 2rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 1rpx;
	}
	
	.book-icon::after {
		content: '';
		position: absolute;
		top: 15rpx;
		left: 8rpx;
		right: 8rpx;
		height: 2rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 1rpx;
	}
	
	.whistle-icon {
		width: 20rpx; /* 调整哨子图标大小 */
		height: 20rpx;
		background: linear-gradient(135deg, #ffde59, #ffc107);
		border-radius: 50%;
		position: absolute;
		bottom: -5rpx;
		right: -5rpx;
		box-shadow: 0 3rpx 8rpx rgba(255, 222, 89, 0.4);
	}
	
	/* 在线考试图标 */
	.exam-glass-icon {
		position: relative;
	}
	
	.paper-icon {
		width: 48rpx; /* 调整试卷图标大小 */
		height: 54rpx;
		background: linear-gradient(135deg, #ff9950, #ff7043);
		border-radius: 8rpx;
		position: relative;
		box-shadow: 0 4rpx 16rpx rgba(255, 153, 80, 0.3);
	}
	
	.paper-icon::before {
		content: '';
		position: absolute;
		top: 10rpx;
		left: 8rpx;
		right: 8rpx;
		height: 2rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 1rpx;
	}
	
	.paper-icon::after {
		content: '';
		position: absolute;
		top: 17rpx;
		left: 8rpx;
		right: 8rpx;
		height: 2rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 1rpx;
	}
	
	.check-icon {
		width: 20rpx; /* 调整对勾图标大小 */
		height: 20rpx;
		background: linear-gradient(135deg, #4caf50, #388e3c);
		border-radius: 50%;
		position: absolute;
		bottom: -5rpx;
		right: -5rpx;
		box-shadow: 0 3rpx 8rpx rgba(76, 175, 80, 0.4);
	}
	
	.check-icon::before {
		content: '';
		position: absolute;
		top: 5rpx;
		left: 4rpx;
		width: 6rpx;
		height: 3rpx;
		border-left: 2rpx solid white;
		border-bottom: 2rpx solid white;
		transform: rotate(-45deg);
	}
	
	/* 学习计划图标 */
	.plan-glass-icon {
		position: relative;
	}
	
	.calendar-icon {
		width: 50rpx; /* 调整日历图标大小 */
		height: 50rpx;
		background: linear-gradient(135deg, #9c77f8, #7b68ee);
		border-radius: 8rpx;
		position: relative;
		box-shadow: 0 4rpx 16rpx rgba(156, 119, 248, 0.3);
	}
	
	.calendar-icon::before {
		content: '';
		position: absolute;
		top: 8rpx;
		left: 8rpx;
		right: 8rpx;
		height: 5rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 2rpx;
	}
	
	.calendar-icon::after {
		content: '';
		position: absolute;
		top: 20rpx;
		left: 10rpx;
		width: 6rpx;
		height: 6rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 50%;
	}
	
	.progress-icon {
		width: 20rpx; /* 调整进度图标大小 */
		height: 20rpx;
		background: linear-gradient(135deg, #ff4081, #e91e63);
		border-radius: 50%;
		position: absolute;
		bottom: -5rpx;
		right: -5rpx;
		box-shadow: 0 3rpx 8rpx rgba(255, 64, 129, 0.4);
	}
	
	/* 比赛报名图标 */
	.match-glass-icon {
		position: relative;
	}
	
	.trophy-icon {
		width: 48rpx; /* 调整奖杯图标大小 */
		height: 54rpx;
		background: linear-gradient(135deg, #3498db, #2980b9);
		border-radius: 8rpx 8rpx 18rpx 18rpx;
		position: relative;
		box-shadow: 0 4rpx 16rpx rgba(52, 152, 219, 0.3);
	}
	
	.trophy-icon::before {
		content: '';
		position: absolute;
		top: 8rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 18rpx;
		height: 18rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 50%;
	}
	
	.trophy-icon::after {
		content: '';
		position: absolute;
		bottom: 8rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 28rpx;
		height: 5rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 2rpx;
	}
	
	.star-icon {
		width: 20rpx; /* 调整星星图标大小 */
		height: 20rpx;
		background: linear-gradient(135deg, #ffd700, #ff8f00);
		border-radius: 50%;
		position: absolute;
		bottom: -5rpx;
		right: -5rpx;
		box-shadow: 0 3rpx 8rpx rgba(255, 215, 0, 0.4);
	}
	
	.star-icon::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 12rpx;
		height: 12rpx;
		background: rgba(255, 255, 255, 0.9);
		clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	}
	
	/* 移除图标容器背景色（不再需要） */
	
	/* 图标样式 */
	.rule-glass-icon, .exam-glass-icon, .plan-glass-icon, .match-glass-icon {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}
</style>
